:root { /* Base dark theme tokens (default) */ --bg: #121212; --bg-elevated: #1d1d1d; --bg-elevated-soft: #222; --accent: #ff5c5c; --accent-soft: rgba(255, 92, 92, 0.12); --border-subtle: #333; --text: #f5f5f5; --text-muted: #aaa; --danger: #ff5c5c; --success: #4caf50; --radius: 10px; --spacing: 10px; --shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.5); } /* Theme variants: applied to via class names */ /* Red theme - darker, more vivid red accents for a stronger "badass" look */ body.theme-red { --bg: #080606; --bg-elevated: #120909; --bg-elevated-soft: #160a0a; --accent: #ff3333; /* brighter, more vivid red */ --accent-soft: rgba(255,51,51,0.14); /* stronger soft glow */ --border-subtle: #3a1515; --text: #fff6f5; /* slightly warmer text for contrast */ --text-muted: #d9bcbc; --danger: #ff4444; /* punchier danger color */ --success: #7ccb7c; --shadow-soft: 0 14px 36px rgba(0,0,0,0.65); } /* Green tactical theme */ body.theme-green { --bg: #071009; --bg-elevated: #0d130d; --bg-elevated-soft: #0f1810; --accent: #58b368; --accent-soft: rgba(88,179,104,0.10); --border-subtle: #12321a; --text: #e7f7ee; --text-muted: #98bfa4; --danger: #ff8a6b; --success: #58b368; --shadow-soft: 0 10px 24px rgba(0,0,0,0.55); } /* Amber warm theme */ body.theme-amber { --bg: #100b05; --bg-elevated: #19110a; --bg-elevated-soft: #22170d; --accent: #ffb86b; --accent-soft: rgba(255,184,107,0.10); --border-subtle: #352416; --text: #fff6ef; --text-muted: #d6c6b2; --danger: #ff6b6b; --success: #9cd67a; --shadow-soft: 0 10px 22px rgba(0,0,0,0.55); } /* Blue calm theme */ body.theme-blue { --bg: #071122; --bg-elevated: #0b1930; --bg-elevated-soft: #0f2742; --accent: #4aa3ff; --accent-soft: rgba(74,163,255,0.10); --border-subtle: #163048; --text: #eaf6ff; --text-muted: #9fc8ee; --danger: #ff7a7a; --success: #7ed58a; --shadow-soft: 0 10px 24px rgba(5,14,25,0.6); } /* Blue + Red contrast theme (blue base with vivid red accents) */ body.theme-blue-red { --bg: #06101a; --bg-elevated: #0c161b; --bg-elevated-soft: #11181c; --accent: #ff3860; /* red accent */ --accent-soft: rgba(255,56,96,0.10); --border-subtle: #2a1620; --text: #fff6f8; --text-muted: #d9b7bf; --danger: #ff4d6e; --success: #7ed58a; --shadow-soft: 0 12px 28px rgba(0,0,0,0.6); } /* Mono grayscale theme */ body.theme-mono { --bg: #0b0b0b; --bg-elevated: #141414; --bg-elevated-soft: #1a1a1a; --accent: #bdbdbd; --accent-soft: rgba(189,189,189,0.08); --border-subtle: #2b2b2b; --text: #efefef; --text-muted: #9a9a9a; --danger: #b86b6b; --success: #9abf9a; --shadow-soft: 0 8px 18px rgba(0,0,0,0.55); } /* Slight visual tweaks to make the red/other themes feel "badass" without being bright */ .top-tabs, .panel { transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease; } .tab.active { box-shadow: 0 4px 16px rgba(0,0,0,0.6); } .tab { transition: color 160ms ease, background 160ms ease; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { display: flex; } #app { flex: 1; display: flex; flex-direction: column; height: 100vh; } /* Top navigation */ .top-tabs { display: flex; gap: 4px; padding: 6px; background: #101010; border-bottom: 1px solid var(--border-subtle); } .top-tabs .tab { flex: 1; border: none; background: transparent; padding: 6px 4px; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 999px; cursor: pointer; } .top-tabs .tab.active { background: var(--accent-soft); color: var(--accent); } /* Layout */ main { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .page { flex: 1; display: none; padding: 8px; overflow: hidden; } .page.visible { display: flex; flex-direction: column; } .panel { background: var(--bg-elevated); border-radius: var(--radius); padding: 8px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: 8px; height: 100%; } .small-panel { margin-top: 8px; } .panel-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); border-bottom: 1px solid #262626; padding-bottom: 4px; } /* Forms */ .field-group { display: flex; flex-direction: column; gap: 4px; } .field-row { display: flex; gap: 8px; flex-wrap: wrap; } .field-group label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } input[type="text"], select, textarea { width: 100%; border-radius: 6px; border: 1px solid #333; background: #141414; color: var(--text); padding: 6px 8px; font-size: 13px; } textarea { resize: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-soft); } /* Buttons */ button { border-radius: 999px; border: 1px solid #444; background: #1e1e1e; color: var(--text); padding: 6px 10px; font-size: 12px; cursor: pointer; } button:hover { background: #272727; } button.primary { background: var(--accent); border-color: var(--accent); color: #1a1207; font-weight: 600; } button.primary:hover { filter: brightness(1.05); } button:disabled { opacity: 0.4; cursor: default; } .full-width { width: 100%; } .inline-row { display: flex; gap: 6px; align-items: center; } /* Misc text */ .muted { color: var(--text-muted); } .small-text { font-size: 11px; } /* Mapping */ .mapping-panel { display: grid; grid-template-columns: 40% 60%; gap: 8px; } .mapping-list { display: flex; flex-direction: column; gap: 6px; } .mapping-editor { background: var(--bg-elevated-soft); border-radius: var(--radius); border: 1px solid #2a2a2a; padding: 8px; overflow-y: auto; } #location-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 160px); overflow-y: auto; } .location-item { padding: 6px 8px; border-radius: 6px; border: 1px solid #333; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; cursor: pointer; background: #161616; } .location-item.active { border-color: var(--accent); background: #1f1a14; } .location-item span { font-size: 13px; } .location-item button { font-size: 10px; padding: 3px 6px; } /* Storyline */ #story-blocks-container { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; max-height: calc(100vh - 210px); } .story-block { padding: 6px; border-radius: 6px; border: 1px solid #333; background: #181818; display: flex; flex-direction: column; gap: 4px; } .story-block-header { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); } /* Characters */ .characters-panel { display: grid; grid-template-columns: 38% 62%; gap: 8px; } .characters-list { display: flex; flex-direction: column; gap: 6px; } #character-list { list-style: none; margin: 0; padding: 0; max-height: calc(100vh - 210px); overflow-y: auto; } .character-item { padding: 6px 8px; border-radius: 6px; border: 1px solid #333; background: #161616; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; cursor: pointer; } .character-item.active { border-color: var(--accent); background: #1f1a14; } .characters-editor { background: var(--bg-elevated-soft); border-radius: var(--radius); border: 1px solid #2a2a2a; padding: 8px; overflow-y: auto; } .character-tag { font-size: 10px; padding: 2px 6px; border-radius: 999px; border: 1px solid #444; } /* Teams */ .teams-panel { gap: 8px; } .teams-columns { display: grid; grid-template-columns: 38% 62%; gap: 8px; flex: 1; min-height: 0; } .teams-list-col { display: flex; flex-direction: column; } #team-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; max-height: calc(100vh - 210px); } .team-item { padding: 6px 8px; border-radius: 6px; border: 1px solid #333; background: #161616; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; cursor: pointer; } .team-item.active { border-color: var(--accent); background: #1f1a14; } .teams-editor-col { background: var(--bg-elevated-soft); border-radius: var(--radius); border: 1px solid #2a2a2a; padding: 8px; overflow-y: auto; } /* Relationships */ #relationship-list { overflow-y: auto; max-height: calc(100vh - 160px); display: flex; flex-direction: column; gap: 6px; } .relationship-item { padding: 6px; border-radius: 6px; border: 1px solid #333; background: #181818; display: flex; flex-direction: column; gap: 4px; } /* Sim */ .sim-panel { display: grid; grid-template-rows: auto 1fr; gap: 8px; } .sim-controls { display: flex; flex-direction: column; gap: 6px; } .checkbox-row { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; } .sim-actions-group { display: flex; flex-direction: column; gap: 4px; } .sim-output-wrapper { background: #050505; border-radius: var(--radius); border: 1px solid #333; overflow: hidden; display: flex; flex-direction: column; min-height: 0; } .sim-header { padding: 6px 8px; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; } #sim-page-label { font-weight: 600; color: var(--accent); } .sim-body { position: relative; flex: 1; display: flex; min-height: 0; } .sim-background { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(4px) brightness(0.4); opacity: 0.8; } .sim-overlay { position: relative; z-index: 1; display: grid; grid-template-columns: 30% 70%; width: 100%; padding: 6px; gap: 6px; } .sim-characters-status { background: rgba(10, 10, 10, 0.85); border-radius: 8px; border: 1px solid #333; padding: 6px; overflow-y: auto; font-size: 12px; } .sim-story { background: rgba(8, 8, 8, 0.9); border-radius: 8px; border: 1px solid #333; padding: 8px; overflow-y: auto; font-size: 15px; /* slightly larger for readability */ line-height: 1.45; } /* Sim story formatting */ .sim-story h2, .sim-story h3 { margin: 0 0 4px; font-size: 14px; } .sim-story p { margin: 0 0 10px; } /* Separate full page entries so pages are visually spaced in the story column */ .sim-page-entry { margin-bottom: 12px; } .sim-story strong { color: #ffffff; } .sim-story .char-name { color: #ff4d4d; font-weight: 700; } /* Utility */ .preset-row { display: flex; gap: 4px; } /* Scrollbars */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; } /* Responsive tweaks */ @media (max-width: 800px) { .mapping-panel, .characters-panel, .teams-columns, .sim-overlay { grid-template-columns: 1fr; } .sim-overlay { grid-template-rows: 40% 60%; } .top-tabs .tab { font-size: 10px; } .field-row { flex-direction: column; } }